<template>
  <view class="machineDetail">
     <pagehead @tap.stop="$tools.switchTab('/pagesMain/user/user')">我的交易</pagehead>
     <view class="machineDetail-sort">
       <view>合计:{{userTradeInfo.trade_money || 0}}元  共:{{ userTradeInfo.trade_num || 0}}笔</view>
       <view class="right" @tap.stop="modelSortShow = !modelSortShow">筛选
         <image :src="IMAGE_STATIC+'/images/sort.png'" class="ico" mode="heightFix" />
       </view>
     </view>
     <scroll-view scroll-y @scrolltolower="lower()"  class="machineDetail-scroll" v-if="isShowPage">
       <view class="machineDetail-list" v-if="list.length != 0">
         <view v-for="(item) in list" :key="item.id" class="machineDetail-item">
           <view class="top">
             <view class="name">{{ item.user_name }}</view>
             <view class="right">{{ item.phone_no | conceal(4) }}
               <image :src="IMAGE_STATIC+'/images/copy.png'" @click="$tools.copy(item.phone_no)" class="ico" mode="heightFix" />
             </view>
           </view>
           <view class="info">
             <view class="label">商户名称</view>
             <view class="des" @tap.stop="$tools.jump('/pages/tradeOrder/tradeOrderDetail', item.id)">{{ item.merchant_name }}
               <image class="ico" :src="IMAGE_STATIC+'/images/go.png'" />
             </view>
           </view>
           <view class="info">
             <view class="label">交易单号</view>
             <view class="des">{{ item.id_txn_ctrl }}</view>
           </view>
           <view class="info">
             <view class="label">交易类型</view>
             <view class="des">{{ item.trade_type=='1'?'刷卡支付':'扫码支付' }}</view>
           </view>
           <view class="info">
             <view class="label">交易金额</view>
             <view class="des">{{ item.amt }}</view>
           </view>
           <view class="info">
             <view class="label">支付方式</view>
             <view class="des">{{ getType(item.app_type) }}</view>
           </view>
           <view class="info">
             <view class="label">交易时间</view>
             <view class="des">{{ item.txn_time }}</view>
           </view>
         </view>
       </view>
       </scroll-view>
       <view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
      <!-- 筛选弹窗 -->
      <view v-if="modelSortShow" ref="sortPopu" class="model-bg" @tap="modelSortShow = false"
      :style="{ top: `calc(88rpx + ${statusBarHeight}px)` }">
         <view class="modal" @tap.stop="modelSortShow = true">
           <view class="sortPopu">
             <view class="title">商户</view>
             <view class="choosw">
               <u--input
                 class="form-item-inner border-b"
                 placeholder="请输入商户名称"
                 type="text"
                 customStyle="marginLeft:20rpx;marginRight:40rpx;width:100%;border-radius: 0;"
                 border="none"
                 v-model="chooseObj.merchant_name"
               ></u--input>
             </view>
             <view class="title mt-56">机具SN号</view>
             <view class="info">
               <view class="txt" style="width: 100%;">
                 <u--input
                 class="form-item-inner border-b"
                 placeholder="请输入机具SN号"
                 type="text"
                 customStyle="marginLeft:20rpx;marginRight:40rpx;width:100%;border-radius: 0;"
                 border="none"
                 v-model="chooseObj.sn_code"
               ></u--input>
               </view>
               <!-- <view class="txt">
                 <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
                   @change="startDatePicker">
                   <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择开始时间' }}</view>
                 </picker>
                 <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
               </view> -->
             </view>
             <view class="title">交易时间</view>
             <view class="info">
               <view class="label">开始时间</view>
               <view class="txt">
                 <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
                   @change="startDatePicker">
                   <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择开始时间' }}</view>
                 </picker>
                 <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
               </view>
             </view>
             <view class="info border-b">
               <view class="label">结束时间</view>
               <view class="txt">
                 <picker mode="date" :value="chooseObj.endData" :start="startDateValid" end="2999-12-31"
                   @change="endDatePicker">
                   <view>{{ chooseObj.endData ? chooseObj.endData : '请选择结束时间' }}</view>
                 </picker>
                 <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
               </view>
             </view>
             <view class="title mt-56">机具名称</view>
             <view class="tab tab1">
               <view v-for="(item, index) in flist" :key="index" :class="[currentIndex1 == index ? 'active' : '', 'item']"
                 @tap="changeTab1(index,item)">{{ item.name }}</view>
             </view>
             <view class="title mt-32">交易方式</view>
             <view class="tab tab1">
               <view v-for="(item, index) in tabStatus" :key="index" :class="[currentIndex2 == index ? 'active' : '', 'item']"
                 @tap="changeTab2(index,item)">{{ item.name }}</view>
             </view>
             <view class="bottom-box">
               <view class="bottom">
                 <view class="btn reset" @tap.stop="reset()">重置</view>
                 <view class="btn sure" @tap.stop="sure()">确定</view>
               </view>
             </view>
           </view>
         </view>
       </view>
   </view>
 </template>
 
 <script>
 export default {
   data() {
     return {
       IMAGE_STATIC: this.$url.assetsPath,
       currentIndex: 0,
       type: '',
       pageIndex: 1,
       pageSize: 10,
       lastId: '',
       lsShow: true,
       isShowPage: true,
       tab: [
         { name: '全部' },
         { name: '考核达标中' },
         { name: '考核结束' },
       ],
       total: 0,
       list: [
       ],
       modelDesShow: false,
       modelSortShow: false,
       currentIndex: 0,
       chooseObj: {  // 筛选条件
         merchant_name:'',
         sn_code: '', // 
         trade_type: '', // 
         name: '', // 
         startDate: this.getDate('-'), //开始时间
         endData: this.getDate('-')  //结束时间
       },
       // 选择时间范围
       startDateValid: '1900-01-01',
       // 分润
       tabGrade: [
         { type: 0, name: '乐刷电签' },
         { type: 1, name: '银盛宝电签' },
         { type: 2, name: '聚合码付 (码牌)' },
         { type: 3, name: '银多财电签' },
         { type: 4, name: '中多财电签' },
         { type: 5, name: '中多财大POS' },
       ],
       currentIndex1: 0,
       // 认证状态
       tabStatus: [
         { type: 1, name: '贷记卡交易' },
         { type: 2, name: '借记卡交易' },
         { type: 3, name: '云闪付交易' },
         { type: 4, name: '扫码交易' },
       ],
       currentIndex2: 0,
       flist:[],
       userTradeInfo:{},
       statusBarHeight:0,
     };
   },
   computed:{
     getType(){
       // WECHAT：（微信BSC）WECHATCSB:（微信CSB）WECHATOA：（微信）ALIPAY:（支付宝BSC）ALIPAYCSB:（支付宝CSB）CUPCSB:（银联CSB）CUPBSC:（银联BSC）CP:（刷卡）
         return function(type){
           switch (type){
             case 'WECHAT':
               return '微信BSC';
               break;
             case 'WECHATCSB':
               return '微信CSB';
               break;
             case 'ALIPAY':
               return '支付宝BSC';
               break;
             case 'ALIPAYCSB':
               return '支付宝CS ';
               break;
             case 'CUPCSB':
               return '银联CSB';
               break;
             case 'CUPBSC':
               return '银联BSC';
               break;
             case 'CP':
               return '刷卡';
               break;
           }
         }
       },
   },
   onLoad(options) {
     if (options) {
       this.type = options.value1
     }
     const that = this
     this.init();
     //获取手机型号
     uni.getSystemInfo({
       success: function (res) {
       that.statusBarHeight = res.statusBarHeight//状态栏高度
       that.platform = res.platform//机型
       console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
       }
     });
   },
   // 下拉刷新
   onPullDownRefresh() {
     console.log('refresh');
     this.init();
     this.isLoadShow = true;
     setTimeout(function () {
       uni.stopPullDownRefresh();
     }, 500);
   },
   onReachBottom() {
     console.log("分页 dd");
     if (this.lsShow == true) {
       this.getGoodsList();
     } else {
       // return this.$tools.toast('到底了');
     }
   },
   methods: {
     init() {
       this.total = 0
       this.pageIndex = 1
       this.pageSize = 10
       this.lastId = '';
       this.list = [];
       this.flist = []
       this.getTotal()
       this.getGoodsList();
       this.getCategoryOneList()
     },
     // 分类列表
     getCategoryOneList() {
       var data = {
         is_active:this.chooseObj.status,
       };
       this.$Ajax('/api/system/posName/getSysPosNameList', data, res => {
         if (res.success) {
           this.flist = res.data.sysPosNameList;
         }
       }, err => {
       }
       )
     },
     // 获取总数
     getTotal(){
       var data = {
         sn_code: this.chooseObj.sn_code, // 类型编号
         merchant_name:this.chooseObj.name,
         trade_type:this.chooseObj.trade_type,
         start_date:this.chooseObj.startDate,
         end_date:this.chooseObj.endData,
       };
       console.log('data',data)
       this.$Ajax('/api/user/trade/getUserTradeInfo', data, res => {
         if (res.success) {
           this.userTradeInfo = res.data.userTradeInfo
         }
       }, err => {
       }
       )
     },
     // 商品列表
     getGoodsList() {
       let that = this;
       var data = {
         sn_code: this.chooseObj.sn_code, // 类型编号
         merchant_name:this.chooseObj.merchant_name,
         trade_type:this.chooseObj.trade_type,
         start_date:this.chooseObj.startDate,
         end_date:this.chooseObj.endData,
         last_id: this.lastId,
       };
       console.log("data", data);
       uni.showLoading({
         mask: true
       })
       that.$Ajax('/api/user/trade/getUserTradeList', data, res => {
         uni.hideLoading();
         that.isShowPage = true;
         that.list = that.list.concat(res.data.userTradeList);
         console.log('list', this.list)
         this.serachShow = false
         if(res.data.userTradeList.length>0){
           this.lastId = res.data.userTradeList[res.data.userTradeList.length-1].id
           this.lsShow = true
         }else{
           this.lsShow = false
         }
         console.log("》》》", that.lsShow, that.list.length);
       }, err => {
       }
       );
     },
     lower() {
       console.log("分页");
       if (this.lsShow == true) {
         this.getGoodsList();
       } else {
         // return this.$tools.toast('到底了');
       }
     },
     sure() {
       console.log('筛选条件', this.chooseObj);
       this.modelSortShow = false
       this.init()
     },
     // 开始时间选择
     startDatePicker(e) {
       // 获取用户选择的日期
       // this.chooseObj.startDate = e.detail.value;
       const time = e.detail.value;
       console.log('选择的日期：', e.detail.value);
       if (new Date(time) > new Date(this.chooseObj.endData)) {
         this.chooseObj.startDate = this.chooseObj.endData; // 重置开始时间
       } else {
         this.chooseObj.startDate = time;
       }
     },
     // 结束时间选择
     endDatePicker(e) {
       // 获取用户选择的日期
       // this.chooseObj.endData = e.detail.value;
       const time = e.detail.value;
       console.log('选择的日期：', e.detail.value);
       if (new Date(time) < new Date(this.chooseObj.startDate)) {
         this.chooseObj.endData = this.chooseObj.startDate; // 重置开始时间
       } else {
         this.chooseObj.endData = time;
       }
     },
     // 切换
     changeTab(index) {
       if (this.currentIndex != index) {
         this.currentIndex = index
         // this.init()
       }
     },
     // 切换
     changeTab1(index,item) {
       if (this.currentIndex1 != index) {
         this.currentIndex1 = index
         this.chooseObj.name = item.name
         // this.init()
       }
     },
        // 切换
     changeTab2(index,item) {
       if (this.currentIndex2 != index) {
         this.currentIndex2 = index
         this.chooseObj.trade_type = item.type
       }
     },
     // 重置
     reset() {
       this.modelSortShow = false
       this.resFilds()
       this.init()
     },
     // 清空
     resFilds(){
       this.currentIndex = 0
       this.currentIndex1 = 0
       this.currentIndex2 = 0
       this.chooseObj = {  // 筛选条件
         merchant_name: '', // 
         sn_code: '', // 
         trade_type: '', // 
         name: '',
         startDate:this.getDate('-'), //开始时间
         endData:this.getDate('-')   //结束时间
       }
     }
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .machineDetail {
   position: relative;
   min-height: 100vh;
   height: 100vh; /* 显式设置父元素高度 */
   padding-bottom: 20rpx;
   padding-bottom: 280rpx;
   overflow: hidden;
   &-sort {
     @include flexBetween;
     // overflow: hidden;
     width: 93.6%;
     margin: auto;
     margin-top: 32rpx;
     padding: 0 12rpx;
     font-size: 28rpx;
     color: #000000;
     position: relative;
     height: 48rpx;
     line-height: 48rpx;
 
     .ico {
       width: 32rpx;
       height: 32rpx;
       display: inline-block;
       vertical-align: middle;
       margin-left: 8rpx;
     }
 
     .right {
       @include flexLeft;
     }
 
     .txt {
       margin-left: 14rpx;
     }
   }
 
   &-scroll {
     overflow-y: auto;
     max-height: 100vh;
     padding-bottom: 200rpx;
     /* #ifdef MP-WEIXIN || MP ||  APP-PLUS */
     padding-bottom: 240rpx;
     /* #endif */
   }
 
   &-item {
     overflow: hidden;
     width: 93.6%;
     margin: auto;
     background: #fff;
     border-radius: 16rpx;
     padding: 32rpx 0;
     margin-top: 24rpx;
     font-size: 24rpx;
     color: #000000;
 
     .top {
       @include flexBetween;
       padding: 0 28rpx;
       padding-bottom: 32rpx;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 
       .name {
         font-size: 28rpx;
       }
     }
 
     .ico {
       width: 32rpx;
       height: 32rpx;
       display: inline-block;
       vertical-align: middle;
       margin-left: 8rpx;
     }
 
     .info {
       @include flexBetween;
       padding: 0 28rpx;
       margin-top: 24rpx;
 
       .label {
         font-size: 28rpx;
         color: #999999;
       }
     }
   }
 
   image {
     width: 100%;
     height: 100%;
   }
 }
 
 // 弹窗
 .model-bg {
 
 }
 
 .modal {
   background: #fff;
   width: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
 
   .desPopu {
     overflow: hidden;
     padding: 24rpx 32rpx;
 
     .li {
       padding-bottom: 24rpx;
       padding-top: 24rpx;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       font-size: 28rpx;
       color: #333333;
     }
 
     .li:last-of-type {
       border-bottom: none;
     }
   }
 
   .sortPopu {
     padding: 24rpx;
 
     .tab {
       @include flexLeft;
       flex-wrap: wrap;
       background: #FFFFFF;
       margin-top: 20rpx;
 
       .item {
         width: 220rpx;
         text-align: center;
         height: 80rpx;
         line-height: 80rpx;
         font-size: 28rpx;
         color: #666;
         background: #F3F4F9;
         border-radius: 8rpx;
         margin-right: 24rpx;
       }
 
       .active {
         border: 2rpx solid #AD2926;
         color: #AD2926;
         font-weight: 500;
       }
     }
 
     .title {
       font-size: 28rpx;
       color: #000000;
       font-weight: bold;
     }
 
     .input {
       margin-top: 24rpx;
       padding: 24rpx 0;
       color: #333;
       font-size: 28rpx;
       height: 40rpx;
       line-height: 40rpx;
     }
 
     .info {
       @include flexBetween;
       padding: 24rpx 0;
       color: #333;
       font-size: 28rpx;
 
       .txt {
         color: #999;
         @include flexLeft;
       }
 
       .ico {
         width: 32rpx;
         height: 32rpx;
       }
     }
 
     .tab1 {
       .item {
         margin-top: 20rpx;
         width: calc(29% - 16rpx);
         margin-left: 24rpx;
       }
 
       .item:nth-of-type(3n+1) {
         margin-left: 0;
       }
     }
 
     .border-b {
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     }
 
     .bottom-box {
       margin-top: 90rpx;
       padding: 16rpx 68rpx;
       border-top: 1px solid rgba(0, 0, 0, 0.08);
 
       .bottom {
         @include flexBetween;
 
         .btn {
           width: 248rpx;
           text-align: center;
           height: 80rpx;
           line-height: 80rpx;
           border-radius: 108rpx;
           font-size: 32rpx;
         }
 
         .reset {
           border: 2rpx solid;
           border-image: linear-gradient(180deg, rgba(173, 41, 38, 1)) 2 2;
           color: #AD2926;
         }
 
         .sure {
           background: #AD2926;
           color: #fff;
         }
       }
     }
 
     .mt-56 {
       margin-top: 56rpx;
     }
 
     .mt-32 {
       margin-top: 32rpx;
     }
   }
 }
 </style>
 